import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { WhiteSpace, List, InputItem, Toast } from 'antd-mobile';
import YwxNavBar from '../../components/common/YwxNavBar/YwxNavBar';
import YwxButton from '../../components/common/YwxButton/YwxButton';
import './PartnerAdd.less';


class PartnerAdd extends Component {

    constructor(props) {
        super(props);
        this.state = {
            confirmPassword: '',
            different: false,
            formData: {
                name: '',
                phone: '',
                password: '',
                commission: ''
            }
        }
    };

    nameChange = (value) => {
        this.setState({
            formData: {
                ...this.state.formData,
                name: value
            }
        });
    };
    phoneChange = (value) => {
        this.setState({
            formData: {
                ...this.state.formData,
                phone: value
            }
        });
    };
    passwordChange = (value) => {
        this.setState({
            formData: {
                ...this.state.formData,
                password: value
            }
        });
    };
    confirmPasswordChange = (value) => {
        this.setState({
            confirmPassword: value
        });
    };
    confirmPasswordBlur = () => {
        if (this.state.confirmPassword !== this.state.formData.password) {
            this.setState({
                different: true
            });
        } else {
            this.setState({
                different: false
            });
        }
    };
    commissionChange = (value) => {
        this.setState({
            formData: {
                ...this.state.formData,
                commission: value
            }
        });
    };

    validate = (callback) => {
        let {
            confirmPassword,
            formData
        } = this.state
        let {
            name,
            phone,
            password,
            commission } = formData;

        phone = phone.replace(/\s/g, '');
        commission = commission - 0;

        let msg = ''
        if (!name) {
            msg = '请输入伙伴姓名';
        } else if (!React.$utils.validatePhone(phone)) {
            msg = '请输入正确的手机号';
        } else if (!password) {
            msg = '请输入密码';
        } else if (confirmPassword !== password) {
            msg = '两次密码不一致';
        } else if (commission <= 0) {
            msg = '佣金为大于0的数字';
        }
        if (msg) {
            Toast.fail(msg)
        } else {
            callback && callback()
        }
    }

    onSubmit = () => {

        this.validate(() => {
            let {
                name,
                phone,
                password,
                commission } = this.state.formData;

            phone = phone.replace(/\s/g, '');
            commission = commission - 0;


            React.$utils.request({
                url: '/app/register',
                method: 'post',
                data: {
                    name,
                    phone,
                    password,
                    commission
                }
            }).then(res => {
                Toast.success('添加成功');
                setTimeout(() => {
                    this.props.history.go(-1);
                }, 1500)
            })
        })


    };


    render() {
        return (
            <div className='partner-add' >
                <YwxNavBar>添加你的合作伙伴</YwxNavBar>
                <WhiteSpace />
                <List className='partner-add-form'>
                    <InputItem onChange={this.nameChange} placeholder='请填写合作伙伴的姓名'>姓名</InputItem>
                    <InputItem onChange={this.phoneChange} type='phone' placeholder='请填写合作伙伴的手机号'>手机号码</InputItem>
                    <InputItem onChange={this.passwordChange} type='password' placeholder='请设置合作伙伴的登录密码'>登录密码</InputItem>
                    <InputItem onChange={this.confirmPasswordChange} error={this.state.different} onBlur={this.confirmPasswordBlur} type='password' placeholder='请确认合作伙伴的登录密码'>确认密码</InputItem>
                    <InputItem onChange={this.commissionChange} type='digit' placeholder='' extra='元/单'>佣金</InputItem>
                </List>
                <YwxButton onClick={this.onSubmit}>确认添加</YwxButton>
            </div>
        );
    }
}


export default withRouter(PartnerAdd)